<template>
	<view class="reduce" @click="changeReduce">
    <text class="name">{{name}}</text>
    <view class="raw">
      <text :class="'iconfont icon-xingzhuang raw-up ' + (selected ? reduce ? 'active' : '' : '')"></text>
      <text :class="'iconfont icon-xingzhuang raw-down ' + (selected ? reduce ? '' : 'active' : '')"></text>
    </view>
</view>  </view>
</template>

<script>
	export default {
		data() {
			return {
				reduce: true
			};
		},
    props: {
      name: {
        type: String,
        default: '默认排序'
      },
      selected: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      changeReduce () {
        this.reduce = !this.reduce
        this.$emit('change', this.reduce)
      }
    }
	}
</script>

<style class="scss">
.reduce {
  font-size: 28rpx;
  color: #999999;
  height: 60rpx;
  display: flex;
  align-items: center;
}
.reduce  .name {
   padding-right: 10rpx;
 }
 .reduce .raw {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   
 }
 .reduce .raw .iconfont {
   font-size: 12rpx;
 }
 .reduce .raw .iconfont.active {
   color: #0CB9F2;
 }
 .raw-up {
   transform: rotate(180deg);
 }
 .raw-down {
   margin-top: 5rpx;
 }
</style>
